<template>
  <div class="app-container">
    <el-row :gutter="0">
      <el-col :xs="24" :sm="6" :md="5" :lg="4" class="drag-area" id="drag-area">
        <div style="text-align: center; color: #0fa8e7">数据选择</div>
        <el-input
          style="width: 80%"
          prefix-icon="el-icon-search"
          placeholder="输入关键字"
          v-model="filterText"
        >
        </el-input>

        <el-tree
          :data="data"
          :props="defaultProps"
          @node-click="handleNodeClick"
          class="filter-tree"
          :filter-node-method="filterNode"
          ref="tree"
        ></el-tree>
        <!--      侧边栏拖拽框 -->
      </el-col>

      <el-col :xs="24" :sm="18" :md="18.7" :lg="20" id="drag-content">
        <el-form
          :model="queryParams"
          ref="queryForm"
          :inline="true"
          v-show="showSearch"
          label-width="68px"
        >
        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              v-hasPermi="['place:classroom:add']"
              >新增</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="success"
              plain
              icon="el-icon-edit"
              size="mini"
              :disabled="single"
              @click="handleUpdate"
              v-hasPermi="['place:classroom:edit']"
              >修改</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              :disabled="multiple"
              @click="handleDelete"
              v-hasPermi="['place:classroom:remove']"
              >删除</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              :loading="exportLoading"
              @click="handleExport"
              v-hasPermi="['place:classroom:export']"
              >导出</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="info"
              plain
              icon="el-icon-upload2"
              size="mini"
              @click="handleImport"
              >导入</el-button
            >
          </el-col>
          <right-toolbar
            :showSearch.sync="showSearch"
            @queryTable="getList"
          ></right-toolbar>
        </el-row>

        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="id" width="120">
            <template slot-scope="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column prop="name" label="考生姓名" width="120">
          </el-table-column>
          <el-table-column prop="name" label="准考证号" width="120">
          </el-table-column>
          <el-table-column prop="name" label="报考项" width="120">
          </el-table-column>
          <el-table-column prop="name" label="成绩" width="120">
          </el-table-column>
          <el-table-column prop="name" label="考试地点" width="120">
          </el-table-column>
          <el-table-column prop="name" label="监考人员" width="120">
          </el-table-column>
          <el-table-column prop="name" label="操作" width="120">
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-col>
    </el-row>

    <!-- 添加或修改专业管理对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="学院名称" prop="collegeId">
          <el-select
            v-model="form.collegeId"
            placeholder="请选择学院"
            clearable
            size="small"
            class="width100"
          >
            <el-option
              v-for="item in collegeOptions"
              :key="item.index"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="数据1" prop="name">
          <el-input v-model="form.name" placeholder="请输入专业名称" />
        </el-form-item>
        <el-form-item label="数据2" prop="code">
          <el-input v-model="form.code" placeholder="请输入专业编码" />
        </el-form-item>
        <el-form-item label="专业描述" prop="massage">
          <el-input
            v-model="form.massage"
            type="textarea"
            placeholder="专请输入数据描述"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 用户导入对话框 -->
    <el-dialog
      :title="upload.title"
      :visible.sync="upload.open"
      width="400px"
      append-to-body
    >
      <mytree row="4" v-if="upload.open" @ok="ok"></mytree>
      <div style="height: 20px"></div>
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        :data="{ pid: upload.pid }"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <div class="el-upload__tip" slot="tip">
            <el-checkbox v-model="upload.updateSupport" />
            是否更新已经存在的用户数据
          </div>
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link
            type="primary"
            :underline="false"
            style="font-size: 12px; vertical-align: baseline"
            @click="importTemplate"
            >下载模板</el-link
          >
        </div>
      </el-upload>
      <div slot="footer" class="">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import mytree from "../mytree.vue";
import { getToken } from "@/utils/auth";
import {
  listMajor,
  majorlistCollege,
  getMajor,
  delMajor,
  addMajor,
  updateMajor,
  exportMajor,
} from "@/api/org/major";
import { listCollege } from "@/api/org/college";
// import { listTerm } from "@/api/org/term";

// import { listSchoolyear } from "@/api/org/schoolyear";
import { validateCode } from "@/utils/formCheck";
export default {
  name: "Major",
  components: { mytree },
  data() {
    return {
      data: [
        {
          label: "数据一",
        },
        {
          label: "数据二",
        },
      ],
      filterText: "",
      defaultProps: {
        children: "children",
        label: "label",
      },
      //表单信息
      tableData: [
        {
          date1: "id",
          data2: "考生姓名",
          data3: "准考证号",
          data4: "报考项",
          data5: "成绩",
          data6: "考试地点",
          data7: "监考人员",
          data8: "操作",
        },
      ],

      //       {
      //           data:"监考人类别"，
      //           data:"班额"，
      //           data:"教室类型"，
      //           data:"教室占用"，
      //           data:"教学类别"，
      //           data:"教学用房性质"，
      //           data:"课程级别"，
      //           data:"课程类别"，
      //           data:"课程类型"，
      //           data:"课程属性"，
      //           data:"课程性质"，
      //           data:"考试方式"，
      //           data:"考试形式"，
      //           data:"考试性质"，
      //           data:"NJ年级"，
      //           data:"pxjxsx培训进修时限"，
      //           data:"pxzslxy培训证书类型",
      //           data:"PXZYSSCY 培训专业所属产业",
      //           data:"RXNL 入学年龄",
      //           data:"QKWB 缺考舞弊",data:"SKFS 授课方式",
      //           data:"SSMZSYJXMS 少数民族双语教学模式",
      //           data:'SYLB 实验类别',
      //           data:' SYQLB 授予权类别',
      //           data:"SYYQ 实验要求",
      //           data:"SYZLB 实验者类别",
      //           data:"TSJYXXJD 特殊教育学习阶段",
      // data:'XQ 学期',
      // data:"XWLB 学位类别",

      //         }
      multipleSelection: [],
      // 学年信息
      yearOptions: [],
      // 学期
      termNameOptions: [
        {
          termId: "",
          termName: "",
        },
      ],
      //学院信息
      collegeOptions: [
        {
          id: "",
          name: "",
        },
      ],
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 专业管理表格数据
      majorList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        code: null,
        massage: null,
        collegeId: "",

        // schoolYear: "",
      },
      //临时保存传递参数
      templedata: {},
      //用户下载的东西
      downmsg: "",
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        pid: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/org/major/importData",
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        code: [{ validator: validateCode, trigger: "blur" }],
        name: [{ required: true, message: "请输入专业名称", trigger: "blur" }],
        collegeId: [{ required: true, message: "请选择学院", trigger: "blur" }],
      },
    };
  },
  created() {
    this.getList();

    this.getCollegeList();
  },
  activated() {},
  methods: {},
};
</script>
